import React from 'react'
import Topbar from '../../components/Topbar/Topbar';
import './Xiangqing.css';

import { Toast } from 'antd-mobile';

class Xiangqing extends React.Component {

	constructor(props) {
        super(props);
        this.state = {
            shoucangData:[],
            data:[],
            attr:'https://www.prebeauty.work',
			name:props.location.state.name,
            id:props.location.state.id,
            src:props.location.state.src,
            selectshoucang:false
        };
      }

      componentDidMount(){
        this.getData()
        this.getShoucangData()
      }

      getShoucangData(){
          if(this.state.selectshoucang== false){
              this.setState({
                  selectshoucang: true,
              })
          
        const shoucangparam={
            goodsid:this.state.goodsid,
            userid:this.state.userid,
        }

        fetch(`https://www.prebeauty.work/shoucang/userid=${this.state.userid}&${this.state.goodsid}`,{
            method:'POST',
            body:JSON.stringify(shoucangparam),
            headers:{
                'Content-Type':'application/json'
            }
        })
        
            .then((res)=>res.json())
            .then((res)=>{
                console.log(res);
            })
        }else if(this.state.selectshoucang== true){
            this.setState({
                selectshoucang:false
            })

            fetch(`http://www.prebeauty.work/shoucang/${this.state.userid}&${this.state.goodsid}`,{
                method:'DELETE',
                headers:{
                    'content-type':'application/json'
                }
            }).then((res)=>{
                if(res.status===200){
                    res.json().then((data)=>{
                        console.log('取消收藏')
                    })
                }else{
                    console.log('error')
                }
            })
        }
        
        
  }
      getData(){
            fetch(`https://www.prebeauty.work/exchange/${this.state.id}`)
                .then((res) => res.json())
                .then(data => {
            
                    this.setState({
                        data:data[0],
                    })
                    console.log(this.state.data)
                })
                .catch(err => console.log(err));
        }

	render() {
        return (
			<div>
				<Topbar name={this.state.name} color='#95D2AA'/>

                {/* 大背景 */}
				<div class="background">
                    {/* 轮播图 */}
					<div className="pictures">
						<img src={this.state.src}/>
					</div>
                    
                    {/* 物品简介 */}
					<div className="content">
                        <p className="price">￥{this.state.data.price}</p><br></br>
                        <div id="tag">{this.state.data.group}</div>
						<p className="introduce">{this.state.data.context}</p><br></br>
						<p className="telphone">联系方式：{this.state.data.number}</p><br></br>
						<p className="person">联系人：{this.state.data.person}</p>
                        {/* 收藏 */}
                        <div className="shoucang" >
                            {
                                this.state.selectshoucang == true
                                ?<i className='iconfont icon-w_aixin' style={{color:'red',fontSize:'30px',position:'absolute',bottom:'25px',marginLeft:'80%'}}
                                onClick={this.getShoucangData.bind(this)}/>
                                :<i className='iconfont icon-aixin' style={{color:'red',fontSize:'30px',position:'absolute',bottom:'25px',marginLeft:'80%'}}
                                onClick={this.getShoucangData.bind(this)}/>
                            }
                            {/* <img className="star" src={star}>{this.state.shoucangnum==0?'收藏':this.state.shoucangnum}</img> */}
                            
                        </div>
					</div>
				</div>
			</div>
        )
    }
}

export default Xiangqing


